import { Form,  Row, Col } from 'antd';

import React from 'react';
import MyInput from '../MyInput'
/**
 * 
 * @param {*} props 
 * @returns 
 */




const FormView = (props) => {
  console.log("props:", props);

  // const formItemLayout = {
  //   labelCol: {
  //     xs: { span: 24 },
  //     sm: { span: 8 },
  //   },
  //   wrapperCol: {
  //     xs: { span: 24 },
  //     sm: { span: 16 },
  //   },
  // };
  // const tailFormItemLayout = {
  //   labelCol: { span: 2 },
  //   wrapperCol: {
  //     xs: {
  //       span: 4,
  //       offset: 0,
  //     },
  //     sm: {
  //       span: 4,
  //       offset: 0,
  //     },
  //   },
  // };



  const { form, data, layout,onValuesChange} = props
  const typeList = {
    String: <MyInput.String />,
    Number: <MyInput.Number />,
    Password: <MyInput.Password />,
    TextArea: <MyInput.TextArea />,
    Search: <MyInput.Search />,
    Radio: <MyInput.Radio />
  }

  // 渲染Form.Item
  const fromItemRender = (controlItem) => {
    console.warn("渲染Form.Item",controlItem);
    return (
        <Form.Item
          key={controlItem.id}
          name={controlItem.id}
          label={controlItem.label}
          {...controlItem}
        >
          {typeList[controlItem.type]}
        </Form.Item>)
  }
  // 利用栅格化进行布局
  const layoutRender = (layout = {}) => {
    const { rows } = layout
    const ROWDOM = []
    // 根据一行(Row)有多少个列(Col)生成DOM
    for (const row of rows) {
      let {controlList=[]} = row
      ROWDOM.push(
        <Row 
        key={Math.random()}
        gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}
        >
        {
          controlList.map(({type,controlItemParam})=>{
            return(
              <Col
                span={controlItemParam.span || 8}
                key={controlItemParam.id}
                xs={1} sm={2} md={3} lg={4}
              >
                 { fromItemRender({type,...controlItemParam})}
              </Col>
            )
          })
        }
      </Row>
      )
    }
    return ROWDOM
  }

  return (
    <Form
      form={form}
      // 初始化数据
      initialValues={data}
      // 表单发生改变回调
      onValuesChange={onValuesChange}
    >
      {
        layoutRender(layout)
      }
    </Form>

  )
};

export default FormView

